<!-- swiper轮播组件 -->
<template>
<div>
        <swiper :options="swiperOptions" class="header-swiper" ref="mySwiper" >
            <swiper-slide v-for="item in imageUrl" :key="item.id">
              <img :src="item.src" alt="" >
            </swiper-slide>
            <!-- swiper分页器 -->
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
        </div>
</template>

<script>
export default {
  data () {
    return {
        swiperOptions:{
           pagination: {
            el: '.swiper-pagination'//分页器配置
          },
          loop: true//设置为可轮播
        },
        imageUrl:[
          {
            id:1,
            src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fattach-bbs.letv.com%2Fforum%2F201705%2F10%2F165924clh8786spcojjljo.jpg&refer=http%3A%2F%2Fattach-bbs.letv.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639547686&t=ab3e96c8b9e1b4745c33068f1b01004a'
          },
           {
            id:2,
            src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fku.90sjimg.com%2Fback_pic%2F03%2F96%2F78%2F2457ee0c6e11682.jpg%21%2Fwatermark%2Ftext%2FOTDorr7orqE%3D%2Ffont%2Fsimkai%2Falign%2Fsoutheast%2Fopacity%2F20%2Fsize%2F50&refer=http%3A%2F%2Fku.90sjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639547686&t=e16d561e0ace8ba369ddf34646ad1245'
          },{
            id:3,
            src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.jj20.com%2Fup%2Fallimg%2F811%2F0RQ4110611%2F140RQ10611-6.jpg&refer=http%3A%2F%2Fpic.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639547836&t=6eaa94dfcfd8445965530ce9cc8930a1'
          },{
            id:4,
            src:'https://img1.baidu.com/it/u=2888101296,942244134&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=375'
          },
          {
            id:5,
            src:'https://img2.baidu.com/it/u=1976666311,857671469&fm=26&fmt=auto'
          }
        ]
    };
  },

  computed:{
    swiper() {
      return this.$refs.mySwiper.$swiper//由于swiper是异步加载所以要动态绑定数据必须等到页面挂载完成才加载，可以用nextTick
    }
  },
   
  mounted() {
    this.$nextTick(() => {
      this.swiper.init()
      console.log("12")
    })
    this.swiper.slideTo(3, 1000, false)
  }

 
}

</script>
<style lang='less' scoped>

 .header-swiper{
   width:100%;
   background-color: #ddd;
   height: 2rem;
   img{
     width: 100%;
     height: 100%;
   }
 }
 .header-swiper /deep/ .swiper-pagination-bullet-active{
    background: #fff;
}
</style>